<!--
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 * No deletion without permission, or be held responsible to law.
 * @author FIRE
-->
<template>
  <BasicDrawer v-bind="$attrs" :showFooter="false" :okAuth="'proj:info:pmProjectinformation:edit'"
    @register="registerDrawer" @ok="handleSubmit" width="90%">
    <template #title>
      <Icon :icon="getTitle.icon" class="pr-1 m-1" />
      <span> {{ getTitle.value }} </span>
    </template>

    <div style="display: flex;">
      <!-- 基本信息 -->
      <div>
        <div style="display: flex;margin-bottom: 10px;padding-left: 30px; ;">
          <div style="width: 300px;">
            <div style="color: #aaa">项目编号</div>
            <div style="font-size: 18px;">{{record.projectno}}</div>
          </div>
          <div>
            <div style="color: #aaa">项目名称</div>
            <div style="font-size: 18px;">{{record.projectname}}</div>
          </div>
        </div>
        <BasicForm @register="registerForm">
          <template #sgjd="{ record: childRecord }">
            <div>
              <a-steps :current="1">
                <a-step>
                  <!-- <span slot="title">Finished</span> -->
                  <template #title>施工准备</template>
                  <template #description>
                    <div> <Icon icon="ant-design:check-outlined" /> 风险评估</div>
                    <div> <Icon icon="ant-design:check-outlined" /> 技术文件审批</div>
                    <div> <Icon icon="ant-design:check-outlined" />  合同签订</div>
                  </template>
                </a-step>
                <a-step title="施工中" >
                  <template #description>
                    <div> <Icon icon="ant-design:check-outlined" />  进场通知</div>
                    <div> <Icon icon="ant-design:check-outlined" />  进场确认</div>
                    <div> <Icon icon="ant-design:check-outlined" />  中间验收</div>
                    <div> <Icon icon="ant-design:check-outlined" />  试压冲洗</div>
                  </template>
                </a-step>
                <a-step title="完工待验" >
                <template #description>
                  <div> <Icon icon="ant-design:close-outlined" /> 水表验收</div>
                    <div> <Icon icon="ant-design:close-outlined" /> 通水推送报装</div>
                    <div> <Icon icon="ant-design:close-outlined" /> 预验收</div>
                    <div> <Icon icon="ant-design:close-outlined" /> 水质检测</div>
                </template>
              </a-step>
                <a-step title="验收完成" >
                  <template #description>
                    <div> <Icon icon="ant-design:close-outlined" /> 发起结算</div>
                    <div> <Icon icon="ant-design:close-outlined" /> 结算完成</div>
                   
                  </template>
                </a-step>
                <a-step title="项目结束" >
                </a-step>
              </a-steps>
            </div>

          </template>
        </BasicForm>
        <div style="padding: 10px;">
          <div style="background-color: #eee;text-align: center;display: flex;padding: 30px 10px;">
            <div style="flex: 1;">
              <div><span style="font-size: 20px;"> 0</span>次</div>
              <div>巡检次数</div>
            </div>
            <div style="flex: 1;">
              <div><span style="font-size: 20px;"> 0</span>次</div>
              <div>设计变更</div>
            </div>
            <div style="flex: 1;">
              <div><span style="font-size: 20px;"> 0</span>次</div>
              <div>签证次数</div>
            </div>
            <div style="flex: 1;">
              <div><span style="font-size: 20px;"> 0</span>次</div>
              <div>接水次数</div>
            </div>
            <div style="flex: 1;">
              <div><span style="font-size: 20px;"> 0</span>次</div>
              <div>废管次数</div>
            </div>
            <div style="flex: 1;">
              <div><span style="font-size: 20px;"> 0</span>次</div>
              <div>分单次数</div>
            </div>
          </div>
        </div>

        <div style="display: flex; justify-content: space-between;padding: 10px;">
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
             {{ t('报装附件') }}
          </a-button>
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
            {{ t('工程日志') }}
          </a-button>
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
            {{ t('材料信息') }}
          </a-button>
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
             {{ t('水表清单') }}
          </a-button>
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
             {{ t('项目文件') }}
          </a-button>
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
             {{ t('报装日志') }}
          </a-button>
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
            {{ t('合同管理') }}
          </a-button>
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
             {{ t('安全文件') }}
          </a-button>
          <a-button  @click="handleForm({})" v-auth="'proj:info:pmProjectinformation:edit'">
            {{ t('过程控制') }}
          </a-button>
        </div>
      </div>
      <!-- 打卡 -->
      <div >
        <div style="margin-bottom: 10px;">
          <span style="display: inline-block;width: 5px;height: 12px; background: #aaa;"></span>
          <span style="font-size: 18px;"> 打卡记录</span>
        </div>
        <div :style="{ width: '350px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
          <a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange">
          <template #dateCellRender="{ current }">
            <div
              style="
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 10px;
                color: green;
              "
            >
              {{ getListData(current) }}
            </div>
          </template>
          </a-calendar>
        </div>
        <div style="border: 1px solid #d9d9d9; text-align: center;padding: 20px;">补卡</div>
      </div>
    </div>

  </BasicDrawer>
</template>
<script lang="ts">
  export default defineComponent({
    name: 'ViewsProjInfoPmProjectinformationForm',
  });
</script>
<script lang="ts" setup>
  import { defineComponent, ref, computed } from 'vue';
  import { Dayjs } from 'dayjs';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { router } from '/@/router';
  import { Icon } from '/@/components/Icon';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { PmProjectinformation, pmProjectinformationSave, pmProjectinformationForm } from '/@/api/proj/info/pmProjectinformation';

  const emit = defineEmits(['success', 'register']);

  const { t } = useI18n('proj.info.pmProjectinformation');
  const { showMessage } = useMessage();
  const record = ref < PmProjectinformation > ({} as PmProjectinformation);
  const getTitle = computed(() => ({
    icon: router.currentRoute.value.meta.icon || 'ant-design:book-outlined',
    value: t('项目基本信息'),
  }));
  
  let value = ref('');

  async function onPanelChange (value, mode){
    console.log(value, mode);
  }

  let date = ref<any>([
    {
    iyear : '2024',
    imonth : '4',
    iday : '1',
    },
    {
    iyear : '2024',
    imonth : '4',
    iday : '2',
    },
    {
    iyear : '2024',
    imonth : '4',
    iday : '18',
    }
  ]);
  const getListData = (value: Dayjs) => {
    let str = '';
    date.value.forEach((item) => {
      if (
        item.iyear == value.year() &&
        item.imonth == value.month() + 1 &&
        item.iday == value.date()
      ) {
        str = '已打卡';
      }
    });

    return str;
  };

  const inputFormSchemas: FormSchema[] = [
    {
      label: t('申请主体'),
      field: 'applybodyname',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('联系人'),
      field: 'contacts',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('联系电话'),
      field: 'mobile',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('工程类型'),
      field: 'status',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('安装地址'),
      field: 'projectaddress',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('接件时间'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('设计人员'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('预算人员'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('承包商'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('施工人员'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('施工人员电话'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('项目负责人'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('技术负责人'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('安全负责人'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('材料负责人'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('资料负责人'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('监理'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('工期'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('项目特征'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },
    {
      label: t('任务分配备注'),
      field: 'projectno',
      component: 'Input',
      dynamicDisabled: true,
    },

    {
      label: t('施工进度'),
      field: 'sgjd',
      component: 'Input',
      slot: 'sgjd',
      colProps: { lg: 24, md: 24 },
    },



  ];

  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
    labelWidth: 120,
    schemas: inputFormSchemas,
    baseColProps: { lg: 8, md: 24 },
  });

  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
    setDrawerProps({ loading: true });
    await resetFields();
    const res = await pmProjectinformationForm(data);
    record.value = (res.pmProjectinformation || {}) as PmProjectinformation;
    record.value.__t = new Date().getTime();
    setFieldsValue(record.value);
    setDrawerProps({ loading: false });
  });

  async function handleSubmit() {
    try {
      const data = await validate();
      setDrawerProps({ confirmLoading: true });
      const params: any = {
        isNewRecord: record.value.isNewRecord,
        id: record.value.id,
      };
      // console.log('submit', params, data, record);
      const res = await pmProjectinformationSave(params, data);
      showMessage(res.message);
      setTimeout(closeDrawer);
      emit('success', data);
    } catch (error: any) {
      if (error && error.errorFields) {
        showMessage(t('您填写的信息有误，请根据提示修正。'));
      }
      console.log('error', error);
    } finally {
      setDrawerProps({ confirmLoading: false });
    }
  }
</script>
<style scoped>
  /deep/ .ant-form-item-label>label {
    color: #aaa;
  }
  /* /deep/.ant-steps-item-description{
    max-width: 200px !important;
  } */
</style>